import React, { useState } from "react";

const AddStock: React.FC = () => {
  const [stockCode, setStockCode] = useState("");
  const [stocks, setStocks] = useState<string[]>([]);
  const handleAdd = (e: React.FormEvent) => {
    // 发送添加股票的请求到主进程
    const result = window.Main.addStock(stockCode);
    setStocks(result);
    // 关闭窗口（如果需要）
    // 注意：这里需要确保窗口能够被正确引用和关闭
  };

  const handleDel = (e: React.FormEvent) => {
    // 发送添加股票的请求到主进程
    const result = window.Main.delStock(stockCode);
    setStocks(result);
    // 关闭窗口（如果需要）
    // 注意：这里需要确保窗口能够被正确引用和关闭
  };

  const handleCloseWindow = () => {
    window.Main.closeAddStockWindow();
  };

  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md">
      <h1 className="text-xl font-semibold mb-4">添加代码（如sh600036）： </h1>
      <form className="flex flex-col">
        <input
          type="text"
          className="border p-2 mb-4 rounded"
          placeholder="Enter stock code"
          value={stockCode}
          onChange={(e) => setStockCode(e.target.value)}
        />
        <button
          type="button"
          className="bg-blue-500 text-white py-2 px-4 rounded"
          onClick={handleAdd}
        >
          添加
        </button>
        <button
          type="button"
          className="bg-red-500 text-white py-2 px-4 rounded"
          onClick={handleDel}
        >
          删除
        </button>


        <button
          type="button"
          className="bg-green-200 text-white py-2 px-4 rounded"
          onClick={handleCloseWindow}
        >
          关闭
        </button>
        <div>
          <ul>
            {stocks.map((stock, index) => (
              // eslint-disable-next-line react/no-array-index-key
              <li key={index}>{stock}</li>
            ))}
          </ul>
        </div>
      </form>
    </div>
  );
};

export default AddStock;
